<template>
	<view>
		<cu-custom :bgColor="globalColor" :isBack="true">
		    <block slot="content">去除背景音乐</block>
		</cu-custom>
		<view class="solids video padding-sm">
			<view @tap="upload">
				<text class='cuIcon-cameraadd' style="font-size: 40px;"></text>
			</view>
			<view @tap="upload">
				<text>点我上传视频去除背景音乐</text>
			</view>
		</view>		
		<view class="padding-sm" v-if="result">
			<video class="video-play"  v-bind:src="tempFilePath"/>
		</view>
		<view class="padding-sm" v-if="showMusic">
			<video class="video-play"  v-bind:src="tempFilePath"/>
		</view>
		
		<view class="padding-sm flex flex-direction" style="margin-top: -7px;" @click="complete()" v-if="result">
			<button class="cu-btn bg-cyan">开始去除音乐</button>
		</view>

		<view class="box" v-if="showMusic">
			<cmd-progress :percent="percent" :success-percent="percent" stroke-color="white" custom>
			  <text style="color: #009688;">{{percent}}%</text>
			</cmd-progress>
			<view class="cu-bar btn-group">
				<button class="cu-btn bg-orange shadow-blur" @click="copyMusic">复制视频链接</button>
				<button class="cu-btn bg-green  shadow" @click="downloadFile">下载视频</button>
			</view>
		</view>
		<ad v-if="showAd" :unit-id="indexAd" ad-type="video" ad-theme="white"></ad>
		<!-- #ifdef MP-WEIXIN -->
		<privacy-popup></privacy-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	export default {
		components: {
			cmdProgress
		},
	    data() {
	        return {
	            tempFilePath: '',
				result:false,
				text:'',
				handleFaceStatus:false,
				resultImg:'',
				musicUrl:'',
				showMusic:false,
				percent:0,
				globalColor: getApp().globalData.globalColor
	        }
	    },
		onLoad() {
			
		},
	    methods: {
			copyMusic() {
				var that = this;
				uni.setClipboardData({
					data: that.tempFilePath,
					success: function () {
						uni.setStorageSync(that.tempFilePath,that.tempFilePath)
						uni.showModal({
							content:'已经复制链接到剪切板,请粘贴到浏览器下载'
						})
					}
				});
			},	
	        upload() {
				var that = this;
	            uni.chooseVideo({
	                count: 1, //默认9
	                sourceType: ['album'], //从相册选择
	                success: (res) => {
						that.showMusic = false;
						var size = (res.size / (1024 * 1024)).toFixed(2);
						console.log("视频大小:"+size)
						if(size > 30) {
							uni.showModal({
								content:"视频超过30M,暂时无法处理"
							})
							return
						}
	                    that.tempFilePath = res.tempFilePath
						that.result = true
	                }
	            });
	        },
			complete() {
				var that = this;
				uni.showLoading({
					title:'处理中'
				})
				var globaData = getApp().globalData;
				uni.uploadFile({
					url: that.$qrCodeUrl + "/upload/file", //仅为示例，非真实的接口地址
					filePath: that.tempFilePath,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {
						var uploadData = JSON.parse(res.data).data;
						//开始执行提取音频操作
						wx.login({
						  success (res) {
							const code = res.code; 
							uni.request({
								url:  that.$qrCodeUrl+'/upload/clearMusic',
								data: {
								  code:code,
								  filePath:uploadData,
								  source:that.$source
								},
								method:"POST",
								success: (res) => {
									that.result = false
									uni.showToast({
										title:'去除成功'
									})
									if(res.data.code === '0001') {
										console.log(res.data)
										that.tempFilePath = res.data.data
										that.showMusic = true
									}else {
										uni.showModal({
											content:'未知错误，请联系作者进行解决'
										})
									}
								},
								fail(res) {
									uni.showModal({
										content:'去除失败，请联系作者进行解决'
									})
								},
								complete(res) {
									uni.hideLoading();
								}
							});
						  }
						})	
					},
					fail(res) {
						uni.showModal({
							content:'上传失败，请联系作者进行解决'
						})
						uni.hideLoading()
					}
				});
			},
			downloadFile() {
				var that = this;
				uni.showLoading({
					title:'加载下载资源中'
				})
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						that.percent = 0;
						that.fileStatus='active'
						//请求视频真实地址
						const downloadTask = uni.downloadFile({
							url: that.tempFilePath, //仅为示例，并非真实的资源
							success: (res) => {
								if (res.statusCode === 200) {	
									uni.saveVideoToPhotosAlbum({
										filePath: res.tempFilePath
									});	
								}
							},
							fail:function(){
								uni.showModal({
									content:'下载失败，请复制无水印链接到浏览器下载'
								})
							}
						});
						downloadTask.onProgressUpdate((res) => {
							that.percent = res.progress;
							if(res.progress == 100) {
								uni.showToast({
									icon:'success',
									title:'文件已保存到相册'
								})
							}
						});
					},
					fail: (res) => {
						uni.showModal({
							content:'您没有同意相册权限,视频无法保存[请点击小程序右上角设置按钮 开启相册权限]'
						})
					},
					complete: (res) => {
						uni.hideLoading();
					}
				})
			}
	    }
	}
</script>

<style>
	.video {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100px;
		background: white;
	}
	
	.video-play {
		width: 100%;
		height: 240px;
	}
	.music {
		background: red;
	}
	
	.img {
		width: 100%;
		text-align: center;
	}
	
	.font-color {
		color: #0081FF;
	}
	
	.remo-color {
		color: red;
	}
</style>
